<template>
    <div>
      <h1>用户列表</h1>

      <table border="1">
        <tr>
          <td>编号</td>
          <td>姓名</td>
          <td>年龄</td>
          <td>生日</td>
          <td>操作</td>
        </tr>

        <tr v-for="user in users">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.age }}</td>
          <td>{{ user.bir }}</td>
          <td><a href="javascript:;" @click="delRow(user.id)">删除</a><a :href="'#/user/edit?id='+user.id">修改</a> </td>
        </tr>
      </table>
      <a href="#/user/add">添加</a>
      <router-view></router-view>
      <Footer></Footer>
    </div>
</template>

<script>
  import Footer from "./Footer";
    export default {
        name: "User",

        components: {Footer},
        data(){
            return{

                users:[]
            }
        },
        methods:{
            findAll() {
                this.$http.get("http://rap2api.taobao.org/app/mock/268653/vuelearn/getUserList?page=1&rows=1").then((res)=>{
                    console.log(res.data);
                    this.users = res.data.results;
                })
            },

            delRow(id){
                console.log(id);
                this.$http.get("http://rap2api.taobao.org/app/mock/268653/user/delete?id="+id).then(res=>{
                    console.log(res);
                    if(res.data.success){
                        alert(res.data.msg+",点击确定刷新当前数据!");
                        this.findAll();//查询所有
                    }
                });
            }
        },
        created() {
           this.findAll()
        },

        watch:{
            $route:{
                handler:function (val, oldVal) {
                    //val是当前的路由，olgVal是跳转页面的路由
                    if (val.fullPath == '/user') {
                        this.findAll()
                    }
                }
            },
            deep:true

        }

    }
</script>

<style scoped>

</style>
